<template>

  <el-dialog :title=" '[' + formValue.productCode + '] ' + formValue.productName + ' - ' + ( showType=='product' ? '产品客户权限管理' : '客户价卡生效客户管理') + (formValue.versionName ? ' - 价卡: ' + formValue.versionName: '' ) "
             :visible.sync="dialogTableVisible"
             width="900px"
             @opened="$refs['tableAuto'].loadData()"

  >

    <el-form labelWidth="120px" label-position="top" style="padding-top: 20px;">

     <div v-if="showType=='product'" style="margin-bottom: 14px;">
        权限管理方式
        <el-radio-group v-model="customerViewType" style="margin-right: 12px; margin-left: 10px;">
          <el-radio-button label="WHITE">白名单</el-radio-button>
          <el-radio-button label="BLACK">黑名单</el-radio-button>
          <el-radio-button label="NONE">不启用权限控制</el-radio-button>
        </el-radio-group>

        <span v-if="customerViewType == 'WHITE'"><i class="el-icon-warning"></i> 只有客户列表中可以使用该产品 </span>
        <span v-if="customerViewType == 'BLACK'"><i class="el-icon-warning"></i> 客户列表中的客户将禁止使用该产品 </span>
     </div>

      <!-- display: flex; justify-content: space-between; padding-right: 20px; -->
      <div style="margin-bottom: 14px;" >

        <common_customer_choose
          :disabled="customerViewType=='NONE'"
          style="width: 300px;"
          v-model="formValue.customerId"
          @changeItem="(e)=>{ if(!e) return; formValue.customerCode = e.customerCode; formValue.customerName = e.customerName;}"
        ></common_customer_choose>
        <el-button :disabled="customerViewType=='NONE'" icon="el-icon-plus" style="margin-left: 8px; margin-right: 20px;" @click="submitForm">添加客户</el-button>



        <el-popover
          placement="bottom"
          width="400"
          trigger="click"
          v-model="showBatchInsertCustomer"
        >
          <el-input type="textarea" style="margin-bottom: 10px; " v-model="customerCodes" rows="9"
                    placeholder="请输入客户编码， 以`换行`或`逗号`分隔"
          ></el-input>
          <el-button @click="batchInsertCustomerCodes">批量添加</el-button>
          <el-button slot="reference" type="text" :disabled="customerViewType=='NONE'" icon="el-icon-plus" style=" margin-right: 20px;" >批量添加客户</el-button>
        </el-popover>


        <ex-button-delete
          :disabled="customerViewType=='NONE'"
          deleteUrl="/fms-api/product/PmsTransportProductPermissionRpc/removeBatch.json"
          :deleteParam="{ 'ids': selectRowIds }"
          @afterOperationDone="$refs['tableAuto'].loadData()"
          message="确认删除这些用户吗？"
          label="批量删除"
          :beforeSubmit="()=>{ if(selectRowIds == '') { $message({'type':'error', 'message': '还没有选中客户'}); return false; } return true; }"
        ></ex-button-delete>

      </div>

      <!-- v-if="customerViewType!='NONE'" -->
      <ex-table-auto

          ref="tableAuto"
         :url="queryUrl"
         style="width: 100%; margin-top: 10px; margin-bottom: 12px;"  height="400px"
         autoFill
         autoPage
         border
         :autoLoad="true"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="date" :label=" customerViewType=='BLACK' ? '已禁用客户': '已添加客户'  " min-width="150">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div style="width: 300px; ">
                [{{ scope.row.customerCode }}] {{ scope.row.customerName }}
              </div>
            <template v-if="customerViewType=='WHITE' && formValue.versionId + '' == '-1' ">

              <div>
              <span v-if=" scope.row.versionId + '' != '-1' " style="">价卡: {{ scope.row.versionName  }}  </span>
              <span v-else>标准价卡</span>
              </div>

            </template>
            </div>

          </template>
        </el-table-column>
        <el-table-column  min-width="50">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="keyword"
              placeholder="输入关键字过滤"
              clearable
              style="width: 160px;"
            />
          </template>
          <template slot-scope="scope">
            <ex-button-delete
              deleteUrl="/fms-api/product/PmsTransportProductPermissionRpc/remove.json"
              :deleteParam="{ 'id': scope.row.id }"
              @afterOperationDone="$refs['tableAuto'].loadData()"
              message="确认删除该用户吗？"
              label="删除"
            ></ex-button-delete>

          </template>
        </el-table-column>
      </ex-table-auto>

      <div style="display: flex; justify-content: space-between;">
        <div></div>
        <el-button icon="el-icon" type="primary" @click="dialogTableVisible = false"> 关闭</el-button>
      </div>

    </el-form>
  </el-dialog>

</template>

<script>

  import Vue from 'vue'

  import {mapState} from "vuex";

  export default {
    name: 'warehouse_select',
    data() {
      return {

        dialogTableVisible: false,
        hasLoad: false,

        keyword: '',

        customerViewType: '',


        formValue:{
          "productId": "",
          "versionId": "",
          "customerId": "",
          "customerCode": "",
          "customerName": ""
        },

        rightQuery: '',


        queryUrl: '',

        selectRowIds: '',

        needChange: false,

        showType: '',

        productName: '',

        customerCodes: '',

        showBatchInsertCustomer: false


      }
    },

    watch: {

      'customerViewType'(val, old){

        if(this.customerViewType == 'BLACK'){
          this.formValue.status = 'DISABLED'
        }
        else if(this.customerViewType == 'WHITE'){
          this.formValue.status = 'ENABLE'
        }
        else{
          this.formValue.status = ''
        }
        this.queryUrl = '/fms-api/product/PmsTransportProductPermissionRpc/query.json' + '?productId=' + this.formValue.productId+ '&versionId=' + this.formValue.versionId + '&keyword=' + this.keyword + '&status=' + this.formValue.status

        if(!this.needChange){
          this.needChange = true
          return
        }

        if(val == '' || this.formValue.productId == ''){
          return
        }

        let _this  = this
        _this.$ajax({
          url: '/fms-api/product/PmsTransportProductRpc/changeProductCustomerViewType.json',
          data: {
            "productId": _this.formValue.productId,
            "customerViewType": val
          },
          success: function (res) {
            _this.$message({
              "type": "success",
              "message": "权限管理方式切换成功"
            })

            _this.$emit('customerViewTypeChangeSuccess')
          }
        })
      },

      'keyword'(val, old){
        this.queryUrl = '/fms-api/product/PmsTransportProductPermissionRpc/query.json' + '?productId=' + this.formValue.productId+ '&versionId=' + this.formValue.versionId + '&keyword=' + this.keyword + '&status=' + this.formValue.status
      },
      value: function (val, old) {
      }

    },

    props: {
      value: null,
      'productId': {
        type: String,
        default: ''
      },
      'versionId': {
        type: String,
        default: ''
      }
    },

    created() {

      let _this = this

    },

    mounted(){

    },

    methods: {

      handleSelectionChange(val) {
        this.selectRowIds = val.map(e=>e.id).join(',')
      },

      batchInsertCustomerCodes(){

        let _this = this

        _this.$ajax({
          url: '/fms-api/product/PmsTransportProductPermissionRpc/batchSaveUpdate.json',
          data: {
            'customerCodes': _this.customerCodes,
            'json': JSON.stringify(_this.formValue)
          },
          success: function (res) {
            _this.$message({
              "type": "success",
              "message": "添加成功"
            })

            _this.customerCodes = ''
            _this.showBatchInsertCustomer = false
            _this.$refs['tableAuto'].loadData()

          }
        })

      },
      submitForm(){

        let _this = this

        if(_this.formValue.customerId == ''){
          _this.$message({
            "type": "error",
            "message": "请选择客户"
          })
          return
        }

        _this.$ajax({
          url: '/fms-api/product/PmsTransportProductPermissionRpc/saveUpdate.json',
          data: _this.formValue,
          success: function (res) {
            _this.$message({
              "type": "success",
              "message": "添加成功"
            })

            _this.formValue.customerId = ''
            _this.$refs['tableAuto'].loadData()

          }
        })

      },

      showDialog(cfg) {

        console.log(cfg)

        if(cfg.customerViewType == this.customerViewType){
          this.needChange = true
        }
        else{
          this.needChange = false
        }

        this.showType = cfg.showType
        this.productName = cfg.productName

        this.keyword = ''
        this.formValue.productId = cfg.productId + ''
        this.formValue.productCode = cfg.productCode
        this.formValue.productName = cfg.productName

        this.formValue.versionId = cfg.versionId + ''
        this.formValue.versionName = cfg.versionName
        if(!cfg.customerViewType){
          cfg.customerViewType = 'WHITE'
        }
        let status = ''
        if(cfg.customerViewType == 'BLACK'){
          status = 'DISABLED'
        }
        else if(cfg.customerViewType == 'WHITE'){
          status = 'ENABLE'
        }
        this.customerViewType = cfg.customerViewType

        this.queryUrl = '/fms-api/product/PmsTransportProductPermissionRpc/query.json' + '?productId=' + cfg.productId+ '&versionId=' + cfg.versionId + '&status=' + status
        this.dialogTableVisible = true

        console.log(JSON.stringify(cfg))
        console.log(this.queryUrl)


      },


      afterChange(val) {

      }

    }
  }
</script>
